import { ref, reactive, computed } from 'vue';
import type { Channel, ChartConfig } from '@/types/chart';
import { generateMultiGridEChartsOption, addWarningLines, addMarkPoints } from '@/utils/chartGenerator';
import { echartsParamsManager } from '@/storage/EchartsPrograms';

export function useChartConfig() {
  // 通道配置列表
  const channelsList = reactive<Channel[]>([
    {
      name: 'X1工支',
      unit: 'mm',
      min: -600,
      max: 600,
      color: '#91CC75',
      selected: true,
      type: 'line'
    },
    {
      name: 'X2非支',
      unit: 'mm',
      min: -600,
      max: 600,
      color: '#7CB342',
      selected: true,
      type: 'line'
    },
    {
      name: '导高',
      unit: 'mm',
      min: 5000,
      max: 6600,
      color: '#5470C6',
      selected: true,
      type: 'line'
    },
    {
      name: '磨耗表',
      unit: 'mm',
      min: 0,
      max: 20,
      color: '#8B5CF6',
      selected: true,
      type: 'line'
    },
    {
      name: '速度',
      unit: 'km/h',
      min: 0,
      max: 200,
      color: '#EE6666',
      selected: false,
      type: 'line'
    },
    {
      name: '接触力1',
      unit: 'N',
      min: 0,
      max: 300,
      color: '#73C0DE',
      selected: false,
      type: 'line'
    },
    {
      name: '接触力2',
      unit: 'N',
      min: 0,
      max: 300,
      color: '#5DADE2',
      selected: false,
      type: 'line'
    },
    {
      name: '加速度1',
      unit: 'm/s²',
      min: 0,
      max: 50,
      color: '#3BA272',
      selected: false,
      type: 'line'
    },
    {
      name: '加速度2',
      unit: 'm/s²',
      min: 0,
      max: 50,
      color: '#27AE60',
      selected: false,
      type: 'line'
    },
    {
      name: '网压',
      unit: 'kV',
      min: 25,
      max: 30,
      color: '#FC8452',
      selected: false,
      type: 'line'
    }
  ]);

  // 是否显示速度图表
  const showSpeedChart = ref(false);

  // 图表滚动位置 (0-100)
  const scrollPosition = ref(0);

  // 计算选中的通道
  const selectedChannels = computed(() => {
    const selected = channelsList.filter(channel => channel.selected)
    console.log('selectedChannels computed 更新:', selected.map(c => c.name))
    return selected
  });

  // 图表基础配置
  const chartConfig = ref<ChartConfig>({
    title: '弓网综合检测数据',
    xAxisData: [],
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'cross' }
    },
    legend: {
      data: [],
      top: '5%'
    }
  });

  // 生成ECharts配置
  const generateEChartsOption = (xAxisData: string[] = [], scroll: number = scrollPosition.value) => {
    // 更新X轴数据
    chartConfig.value.xAxisData = xAxisData;

    // 根据是否显示速度决定显示的通道
    let channels = selectedChannels.value;
    if (showSpeedChart.value) {
      // 显示速度时，确保速度通道被选中
      channels = channelsList.filter(ch =>
        ch.selected || ch.name === '速度' || ch.name === '接触力'
      );
    }

    // 生成基础配置，传入滚动位置
    const option = generateMultiGridEChartsOption(
      chartConfig.value,
      channels,
      {
        xdefault: echartsParamsManager.xdefault.value,
        ydefault: echartsParamsManager.ydefault.value,
        yvariable: echartsParamsManager.yvariable.value,
        xpolice: echartsParamsManager.xpolice.value,
        ypolice: echartsParamsManager.ypolice.value
      },
      scroll // 传入滚动位置
    );

    // 不再为拉出值、导高、磨耗表添加警戒线，因为它们现在使用双线显示

    return option;
  };

  // 更新通道颜色
  const updateChannelColor = (channel: Channel, color: string) => {
    channel.color = color;
  };

  // 切换通道选中状态
  const toggleChannelSelection = (channel: Channel) => {
    channel.selected = !channel.selected;
  };

  // 切换速度显示
  const toggleSpeedDisplay = () => {
    showSpeedChart.value = !showSpeedChart.value;
  };

  // 确认通道配置
  const confirmChannelConfig = () => {
    // 由于selectedChannels是计算属性，会自动响应channelsList的变化
    // 图表配置会通过computed自动更新
    console.log('当前选中的通道:', selectedChannels.value.map(c => c.name));
    return generateEChartsOption();
  };

  // 更新滚动位置
  const updateScrollPosition = (position: number) => {
    scrollPosition.value = Math.max(0, Math.min(100, position));
  };

  return {
    channelsList,
    selectedChannels,
    showSpeedChart,
    scrollPosition,
    chartConfig,
    generateEChartsOption,
    updateChannelColor,
    toggleChannelSelection,
    toggleSpeedDisplay,
    confirmChannelConfig,
    updateScrollPosition
  };
}